(components) feature: Use CSS `@layer` for specificity control by Copilot · Pull Request #466 · wethegit/component-library

Copilot · 2026-02-26T18:30:41Z

Description

Implements CSS @layer to provide explicit cascade control. Users can now override component styles without resorting to specificity hacks or !important.

Solution

Established four layers in ascending specificity order:

@layer reset, global, utility, component;

Layer assignments:

reset: CSS resets (src/styles/reset.scss)
global: CSS custom properties for animations, typography, grid layout
utility: Color, spacing, and visibility utilities (3 files)
component: All component module styles (20 files)

Sass constraint: @use statements must precede @layer directives. Each file with imports places @use first, then wraps content in the appropriate layer.

Version: Tagged as patch update in changeset (.changeset/tangy-ways-reply.md)

Additional Notes

Users can now override any component style by adding their own unlayered CSS or by creating a higher-priority layer. Browser support: 96%+ (all modern browsers).

Example generated CSS:

@layer component {
  .modal { opacity: var(--scale, 0); }
}
@layer utility {
  .bg-primary { background-color: #000; }
}

Screenshots

N/A - CSS structural change with no visual impact. Verified via Storybook build output showing correct @layer directives.

Original prompt

This section details on the original issue you should resolve

<issue_title>[COMP] Use CSS @layer</issue_title>
<issue_description># Description

CSS Layer is here and it's well supported. We should use it! It will give us even more control over specificity.

For starters, let's create 4 layers:
@layer reset, global, utility, component

reset: as the name suggests, let's add our reset on this layer

global: easy one too, adds any global stuff to this, like, setting html background color and what not

utility: all utilities go here, colors, spacing, etc

component: this one will require touching quite a few files, but the idea is to add component styles to this layer that way users of the component system can bump specificity with ease</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes [COMP] Use CSS @layer #186

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

changeset-bot · 2026-02-26T18:30:46Z

🦋 Changeset detected

Latest commit: 12c0134

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wethegit/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

andrewrubin

Great job, copilot 👏

marlonmarcello · 2026-02-26T19:00:21Z

@copilot lint is erroring with the following:

src/styles/global.scss
  4:1  ✖  Unexpected empty line before at-rule  at-rule-empty-line-before

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

Copilot · 2026-02-26T19:02:36Z

@copilot lint is erroring with the following:
src/styles/global.scss

...

Fixed in 4a26246. Removed the empty line before the @layer directive in src/styles/global.scss.

marlonmarcello · 2026-02-27T18:02:32Z

@copilot make sure you run yarn changeset and tag this is a patch update

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

Copilot · 2026-02-27T18:06:43Z

@copilot make sure you run yarn changeset and tag this is a patch update

Done in 12c0134. Created a patch changeset for @wethegit/components.

marlonmarcello · 2026-03-02T17:06:33Z

@copilot we are getting an error in CI during test, I think it's one of the updated packages being problematic:

Run yarn install --immutable
yarn install v1.22.22
[1/4] Resolving packages...
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^6.0.0"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^5.1.2"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^5.0.1"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^7.0.0"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^7.0.0"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^7.2.0"
[2/4] Fetching packages...
error Error: https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-8.6.14.tgz: Request failed "502 Bad Gateway"
    at ResponseError.ExtendableBuiltin (/usr/local/lib/node_modules/yarn/lib/cli.js:696:66)
    at new ResponseError (/usr/local/lib/node_modules/yarn/lib/cli.js:802:124)
    at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:66750:16)
    at Request.emit (node:events:514:28)
    at module.exports.Request.onRequestResponse (/usr/local/lib/node_modules/yarn/lib/cli.js:142287:10)
    at ClientRequest.emit (node:events:514:28)
    at HTTPParser.parserOnIncomingClient (node:_http_client:693:27)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)
    at TLSSocket.socketOnData (node:_http_client:535:22)
    at TLSSocket.emit (node:events:514:28)
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Process completed with exit code 1.

Copilot · 2026-03-02T17:08:05Z

@copilot we are getting an error in CI during test, I think it's one of the updated packages being problematic:
Run yarn install --immutable

...

This is a transient 502 Bad Gateway error from the npm registry (https://registry.yarnpkg.com) when fetching @storybook/builder-vite-8.6.14.tgz. It's not caused by my code changes - this is a temporary infrastructure issue with the package registry. The workflow should succeed when re-run after the registry recovers. No action needed on my part.

Initial plan

9ea3954

Copilot AI assigned Copilot and marlonmarcello Feb 26, 2026

Copilot started work on behalf of marlonmarcello February 26, 2026 18:30 View session

marlonmarcello requested review from andrewrubin, liamegan and marlonmarcello February 26, 2026 18:31

Copilot AI and others added 2 commits February 26, 2026 18:36

Add CSS @layer implementation for all components and utilities

955433c

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

Fix CSS @layer implementation - move @use before @layer directive

799a557

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add CSS @layer implementation for styling control~~ (components) feature: Use CSS @layer for specificity control Feb 26, 2026

Copilot finished work on behalf of marlonmarcello February 26, 2026 18:45

andrewrubin previously approved these changes Feb 26, 2026

View reviewed changes

marlonmarcello marked this pull request as ready for review February 26, 2026 18:56

Copilot started work on behalf of marlonmarcello February 26, 2026 19:00 View session

Fix stylelint error: remove empty line before @layer directive

4a26246

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

Copilot AI dismissed andrewrubin’s stale review via 4a26246 February 26, 2026 19:02

Copilot finished work on behalf of marlonmarcello February 26, 2026 19:03

Copilot started work on behalf of marlonmarcello February 27, 2026 18:02 View session

Add changeset for CSS @layer patch update

12c0134

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>

Copilot finished work on behalf of marlonmarcello February 27, 2026 18:07

marlonmarcello requested a review from andrewrubin February 27, 2026 21:23

Copilot started work on behalf of marlonmarcello March 2, 2026 17:06 View session

Copilot finished work on behalf of marlonmarcello March 2, 2026 17:08

marlonmarcello approved these changes Mar 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(components) feature: Use CSS `@layer` for specificity control#466

(components) feature: Use CSS `@layer` for specificity control#466
Copilot wants to merge 5 commits intomainfrom
copilot/use-css-layer-for-styling

Copilot AI commented Feb 26, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Feb 26, 2026 •

edited

Loading

Uh oh!

andrewrubin left a comment

Uh oh!

marlonmarcello commented Feb 26, 2026

Uh oh!

Copilot AI commented Feb 26, 2026

Uh oh!

marlonmarcello commented Feb 27, 2026

Uh oh!

Copilot AI commented Feb 27, 2026

Uh oh!

marlonmarcello commented Mar 2, 2026

Uh oh!

Copilot AI commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Solution

Additional Notes

Screenshots

Comments on the Issue (you are @copilot in this section)

Uh oh!

changeset-bot bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

andrewrubin left a comment

Choose a reason for hiding this comment

Uh oh!

marlonmarcello commented Feb 26, 2026

Uh oh!

Copilot AI commented Feb 26, 2026

Uh oh!

marlonmarcello commented Feb 27, 2026

Uh oh!

Copilot AI commented Feb 27, 2026

Uh oh!

marlonmarcello commented Mar 2, 2026

Uh oh!

Copilot AI commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Feb 26, 2026 •

edited

Loading

changeset-bot bot commented Feb 26, 2026 •

edited

Loading